/* eslint-disable no-console */
const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");
const ImageminWebpWebpackPlugin = require("imagemin-webp-webpack-plugin");
const path = require("path");

module.exports = {
  pwa: {
    name: "vue-skeleton-pwa",
    themeColor: "#6476DB",
    msTileColor: "#000000",
    appleMobileWebAppCapable: "yes",
    appleMobileWebAppStatusBarStyle: "black",
    workboxPluginMode: "InjectManifest",
    workboxOptions: {
      // 自定义的service worker文件的位置
      swSrc: "src/service-worker.js"
    }
  },
  publicPath: process.env.NODE_ENV !== "development" ? "/testPwa/" : "/",
  configureWebpack: config => {
    const plugins = [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, "./shell"), // 用来存储 shell 文件的地址
        staticDir: path.resolve(__dirname, "./dist"), // 最好和 `output.path` 相同
        routes: ["/", "/about"] // 将需要生成骨架屏的路由添加到数组中
      }),
      new ImageminWebpWebpackPlugin()
    ];
    // if (process.env.NODE_ENV !== "development") {
    config.plugins = [...config.plugins, ...plugins];
    // }
  },
  chainWebpack: config => {
    // 解决vue-cli3脚手架创建的项目压缩html，干掉<!-- shell -->导致骨架屏不生效
    if (process.env.NODE_ENV !== "development") {
      config.plugin("html").tap(opts => {
        opts[0].minify.removeComments = false;
        return opts;
      });
      config.plugin("workbox");
    }
  }
};
